<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>咨询医师</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../asset/css/bootstrap-pager.css"/>
    <link href="./../css/comm.css" rel="stylesheet">
    <link href="./../css/index.css" rel="stylesheet">
    <style type="text/css">
    	.doctor-form.state-free::before {
				background: url(../img/state-0.png) 0 0 no-repeat;
				background-size: auto auto;
				background-size: 82px 82px;
				content: "";
				height: 82px;
				position: absolute;
				right: 13px;
				top: -4px;
				width: 82px;
				}
				.doctor-form.state-busy::before {
					background: url(../img/state-1.png) 0 0 no-repeat;
					background-size: auto auto;
					background-size: 82px 82px;
					content: "";
					height: 82px;
					position: absolute;
					right: 13px;
					top: -4px;
					width: 82px;
					}
				.doctor-form.state-goAway::before {
						background: url(../img/state-2.png) 0 0 no-repeat;
						background-size: auto auto;
						background-size: 82px 82px;
						content: "";
						height: 82px;
						position: absolute;
						right: 13px;
						top: -4px;
						width: 82px;
				}
				.doctor-form .state-nohere{
					opacity: 0.5;
				}
				.state-nohere{
					opacity: 0.5;
				}
				.docXq-head-img,.docXq-head-img img{
					width: 110px;
					height: 110px;
					border-radius: 50%;
					display: block;
					overflow: hidden;
				}
				.thumbnail{
					border: none;
				}
				.media-body p{
					color: #666666;
					font-size: 16px;
					line-height: 26px;
				}
				.pinfen{
					color: #4fd4c2;
				}
				.serviceCount{
					color: #5886fc;
				}
				#chooseClass{
					width: 195px;
					height: 50px;
					border-radius: 50px !important;
					text-indent: 15px;
					font-size: 18px;
					letter-spacing: 3px;
					border: none;
					background-color: #fff;
					color: #333;
				}
				.doctor-form-btns .btn{
					height: 60px;
					line-height: 50px;
				}
    </style>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- begin header -->
    <header>
        <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified top-nav" style="width: 90%;margin: 0 auto">
            <li>
              <h2>LOGO/**处方平台</h2>
            </li>
            <li>
							<div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="chooseClass" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>全部科室</span><span style="display: inline-block;width: 30px;height: 30px;border-radius: 50%;background-color: #fff;"><i class="glyphicon glyphicon-chevron-right"></i></span></button>
							</div>
							<ul class="dropdown-menu" aria-labelledby="dLabel">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
							</ul>
            </li>
            <li><p>2018年8月20号   星期一</p></li>
          </ul>
        </nav>
    </header>
    <!-- end header -->
    <!-- begin content -->
      <div class="content">
				<div class="content-main container">
					<div class="row doctorList" style="margin: 0">		
					</div>
				</div>
				<!-- 分页条 -->
				<div id="page-container-static-normal"></div>
      </div>
			<!-- 模态框 -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
							<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title" id="myModalLabel"></h4>
									</div>
									<!-- modal-body -->
									<div class="modal-body"></div>
									<!-- modal-body -->
									<div class="modal-footer"></div>
							</div>
					</div>
			</div>
      <!-- end content -->
      <footer>
          <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified">
            <li class="active">
              在线问诊
            </li>
            <li>
              在线审方
            </li>
            <li>
              含麻登记
            </li>
            <li>
              会员中心
            </li>
            <li>
              设置
            </li>
          </ul>
        </nav>
      </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js"></script>
    <script src="../asset/js/bootstrap.min.js"></script>
    <script src="../asset/js/bootstrap-table.min.js"></script>
		<script src="../asset/js/bootstrap-pager.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 查看医生简介 */
			function lookDoctor(id){
				/* /baseDoctor/doctorDetails  */
				$.asyncAx(
									'/baseDoctor/doctorDetails',
									{
									doctorId:id
									},
									null,
									null,
									null,
									function(data){
										console.log(data)
									},
									function(){
											console.log('失败');
									}
								);
				$('#myModal').modal('show');
				$('#myModalLabel').html('医生简介');
				var formHTML='<div class="thumbnail doctor-form">'+
											'<div class="media">'+
												'<div class="media-left">'+
													'<div class="docXq-head-img">'+
														'<img src="../img/doctor-img.jpg" alt="医生头像">'+
													'</div>'+
												'</div>'+
												'<div class="media-body">'+
													'<div class="caption">'+
														'<div class="row" style="margin: 0">'+
															'<div class="col-xs-6 col-md-6 other-text">'+
																'<h4><strong>吴丹</strong></h4>'+
															'</div>'+
															'<div class="col-xs-6 col-md-6 other-text">'+
																'<h5>内科</h5>'+
															'</div>'+
														'</div>'+
														'<div class="row" style="margin: 0">'+
															'<div class="col-xs-6 col-md-6 other-text">'+
																'<p>主治医生</p>'+
															'</div>'+
														'</div>'+
														'<div class="row" style="margin: 0">'+
															'<div class="col-xs-6 col-md-6 other-text">'+
																'<p>评价：<span class="pinfen">4.9</span></p>'+
															'</div>'+
															'<div class="col-xs-6 col-md-6 other-text">'+
																'<p>已服务：<span class="serviceCount">5918</span></p>'+
															'</div>'+
														'</div>'+
													'</div>'+
												'</div>'+
												'<div class="media">'+
													'<div class="media-body">'+
														'<h4>医师简介：</h4>'+
														'<p>片速度快；拼卡大陆居民垃圾的搜集和烦恼离开家啥的技能发多少拉屎电风扇对方对方卢萨卡送达了拉的麦克风看拉伸膜到付款了吗山卡拉大姐夫按键的泛滥的</p>'+
													'</div>'+
												'</div>'+
												'<div class="media">'+
													'<div class="media-body">'+
														'<h4>擅长：</h4>'+
														'<p>按阿斯卡隆阿萨德科技你拉三等奖付款士大夫按理说打开款了吗山卡拉大姐夫按键的泛滥的。</p>'+
													'</div>'+
												'</div>'+
										'</div>'+
									'</div>';
				$('.modal-body').html(formHTML);
				var footHTML="";
				$('.modal-footer').html(footHTML);
			}
			/* 咨询医师 */
			function askDoctor(id){
				$('#myModal').modal('show');
				$('#myModalLabel').html('温馨提示');
				var formHTML='<p>注意：本平台严格按照药品监督管理部门规定，针对年龄18周岁以下、65周岁以上（含65周岁）用户本平台仅作用药咨询，不予开具处方。</p>';
				$('.modal-body').html(formHTML);
				var footHTML='<button type="button" class="btn btn-default">取消</button>'+
										'<button type="button" class="btn btn-primary">确认</button>';
				$('.modal-footer').html(footHTML);
			}
			$(function(){
				var doctorListHTML="";
				var docotrStateHTML="";
				/* 判断医生当前状态 */
				function doctorState(state){
					switch(state){
						case 0:
						/* 医生不在线 */
						docotrStateHTML+='<div class="thumbnail doctor-form state-nohere">';
						break;
						case 1:
						/* 空闲 */
						docotrStateHTML+='<div class="thumbnail doctor-form state-free">';
						break;
						case 2:
						/* 忙碌 */
						docotrStateHTML+='<div class="thumbnail doctor-form state-busy">';
						break;
						case 3:
						/* 离开 */
						docotrStateHTML+='<div class="thumbnail doctor-form state-goAway">';
						break;
					}
				}
				/* 查询医生列表 */
				function getList(){
						$.asyncAx(
											'/baseDoctor/doctorList',
											null,
											null,
											null,
											null,
											function(data){
														for (var i=0;i<data.length;i++) {
															docotrStateHTML="";
															doctorState(data[i].realTimeState);
															doctorListHTML+='<div class="col-xs-6 col-md-3">'+docotrStateHTML+
																								'<!-- 医生状态 -->'+
																										'<div class="doc-head-img">'+
																											'<img src="../img/doctor-img.jpg" alt="医生头像">'+
																										'</div>'+
																										'<div class="caption">'+
																											'<div class="doc-name-tab">'+
																												'<h4><strong>'+data[i].doctorName+'</strong></h4>'+
																												'<h5>主治医师</h5>'+
																											'</div>'+
																											'<div class="row" style="margin: 0">'+
																												'<div class="col-xs-6 col-md-6 other-text">'+
																													'<p>评价：<span class="pinfen">'+data[i].score+'</span></p>'+
																												'</div>'+
																												'<div class="col-xs-6 col-md-6 other-text">'+
																													'<p>已服务：<span class="serviceCount">'+data[i].no+'</span></p>'+
																												'</div>'+
																										'</div>'+
																											'<div class="row doctor-form-btns" style="margin: 0">'+
																												'<div class="col-xs-6 col-md-6 btn btn-success" role="button" onclick="lookDoctor('+data[i].doctorId+')">查看简介</div>'+
																												'<div class="col-xs-6 col-md-6 btn btn-info" role="button" onclick="askDoctor('+data[i].doctorId+')">咨询医师</div>'+
																										'</div>'+
																									'</div>'+
																								'</div>'+
																							'</div>';
															$('.doctorList').html(doctorListHTML);
														}
											},
											function(){
													console.log('失败');
											}
										);
				}
				getList();
				/* 离开状态的医生咨询功能将被禁用 */
				$('.state-nohere .btn-info').attr('disabled', 'disabled');
			})
		</script>
  </body>
</html>